<template>
  <div class="headder">
    <div class="head-cont clear">
      <div class="logo-lk fl">
        <a :href="baseUrl" class="logo-c">
          <img v-if="logoUrl" :src="BASE_URL + logoUrl" alt="logo" />
          <img v-else src="../../../public/logo3.png" alt="logo" />
        </a>
        <a v-if="logoTxt" :href="baseUrl" class="logo-txt" :title="logoTxt">{{
          logoTxt
        }}</a>
        <i>·</i>
        <router-link :to="headOption.link" class="link-home">{{
          headOption.title
        }}</router-link>
      </div>
      <!-- <slot name = 'button'></slot> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    headOption: {
      link: "/",
      title: "",
    },
    path: "/",
    title: "",
  },
  data() {
    return {
      baseUrl: process.env.BASE_URL,
      logoUrl: sessionStorage.getItem("logoUrl"),
      logoTxt: sessionStorage.getItem("siteTitle"),
    };
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss">
.headder {
  background: #fff;
  height: 80px;
  box-shadow: 0 2px 4px 0 rgba(195, 195, 195, 0.3);
}

.head-cont {
  padding: 16px 25px;
}

.logo-lk {
  display: flex;
  align-items: center;
  a,
  img,
  i {
    vertical-align: middle;
  }
  .logo-c {
    display: inline-block;
    vertical-align: top;
    max-width: 180px;
    height: 48px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .logo-txt {
    max-width: 300px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  i {
    margin: 0 5px;
    font-size: 20px;
    font-weight: bold;
  }
  .link-home {
    font-size: 16px;
    color: #000000;
    letter-spacing: 2px;
  }
}
</style>